前言：為了更加熟悉 LocalStorage 所以來製作一個 todolist

自我提醒 :把資料放進去 localStorage 是用 setItem()，把資料取出來是

getItem()。

複習觀念可以看我之前的文章 關於 localStorage 使用說明

範例網址

畫面

透過使用 localStorage 存取你所輸入的資料，在你關閉頁面標籤或瀏覽器再重新開啟時，你原本製作的清單和內容，將被呈現出來。

接下來先有 HTML 我們要先有骨架，再加上 css 包裝他的外表：

HTML

     <div class="content">
        <div class="addList">
          <input type="text" class="text"  placeholder="" required >
          <input type="button" class="send" value="加入代辦">
        </div>
        <ul class="list"></ul>   
     </div>
  </div>

我們必須要宣告 三個東西：

1. 輸入按鈕
2. 呈現 input 值
3. 印出畫面

指定 DOM

let send = document.querySelector('.send');
let text = document.querySelector('.text');

let list = document.querySelector('.list');

每次在頁面讀取時，使用 getItem() 方法從 localStorage 取出資料，並透過 JSON.parse() 方法將資料轉換成原本的格式。然而第一次在提取資料會取不到資料，因此需要建立一個新的空陣列：

let data =  JSON.parse(localStorage.getItem("todolist"))||[];

使用者點擊畫面 使用監聽事件

send.addEventListener('click', addTodo);

製作一個 名為 addData 的 function 我們要製作一個物件，讓把物件存進 localStorage。
hint : localStorage setItem() 裡面的東西 我要把它轉字串喔

JSON.stringify 將陣列轉換為 JSON 字串

function addData(e){
 e.preventDefault;
 // 找到localStorage 存入 裡面的值 使用setItem()
 // 撈出輸入鍵的值
let text =document.querySelector('.text').value;
 // 因為要把輸入的值變成 陣列 所以製作一個空物件 
 let todo ={
   myItem: text
 }
 //在一開始的資料宣告let data （array） 塞進東西
 // 建立一個物件，之後新增的檔案會存放在此
 data.push(todo);
 // 這是更新畫面的function
 updateList(data);
 // 存在Localstoreage
 localStorage.setItem('myItem', JSON.stringify(data));
};
 

把接受來的畫面渲染出畫面，製作一個 updateList 的 function

function updateList(data){
  let str ='';
  let len =data.length;
  for(let i =0;i<len;i++){
     str += `<li>  <a href="#" data-num =${i}>
             <i class="fa fa-times">
              </i></a> <span>${data[i].myItem} </span>   
              </li>`
  }
  list.innerHTML =str;

}

<li>
           `

 接下來是呈現像這樣的畫面：

• 確認是否可以新增 list
• 從檢查者工具看是否 application 看是否有存進資料。

接下來做刪除功能喔，使用 dataset 及 data-* 屬性來做刪除。

製作一個 function 叫做 toggleData 可以刪除功能喔。

function toggleData(e) {
   
    // 使用dataset 取得屬性資料
    var num = e.target.dataset.num;
    console.log(num);
    if (e.target.nodeName !== 'A') {
        return;
    }
    //找到a連節以外的節點就中斷
     // 利用js的splice()刪除array 功能
    data.splice(num, 1);
    //刪除資料、讓?在重新更新
    localStorage.setItem('myItem',JSON.stringify(data));
   
    update(data);

}

結語：這樣大概就是一個十分簡單的 todolist 做出來了，不管你有沒有懂，我來分享一個小小想法，就是試著把方法說出來，不看文章就算是自說自話也好，對著空氣，把你的邏輯說出來吧！如果真的想不到再看一下別人是怎麼做的。
下一個單元預告，我們來結合之前所做的 bmi 計算器，來做個可以有記錄和刪除的計算機（希望拉～）